
<template>
	<Layout class="p-5 bg-white">
		<Modal v-model="modal11">
		  <img :src="url"/>
		</Modal>
		<Form >
			<h1 style="text-align: center;margin: 20px;">车辆出售</h1>
	 <div class="content">
		<div class="width1190">		
			<form action="#" style="margin-left: 100px;" method="get" class="pro-search">
				<table>
					<tbody>
						<tr>
							<th>车型：</th>
							<td style="width: 150px;">  
							     <Input @on-change="searchCarSellInfo(1)" v-model="car.name" style="width:150px" placeholder="请输入车名"></Input>
									
							</td>
							<th>品牌：</th>
							<td>
									<Select @on-change="searchCarSellInfo(1)" v-model="car.brandId" style="width:150px"  transfer>
									        <Option v-for="item in brand" :value="item.brandId">{{ item.brandName }}</Option>
									</Select>
							</td>
							<th>车龄：</th>
							<td>
								<Select  @on-change="searchCarSellInfo(1)" v-model="car.conditionId" style="width:150px"  transfer>
										<Option   v-for="item in condition" :value="item.conditonId">{{ item.conditionInterval }}</Option>
								</Select>
							</td>
							<th>里程数：</th>
							<td>
							<Select @on-change="searchCarSellInfo(1)" v-model="car.mileageId" style="width:150px"  transfer>
							        <Option v-for="item in mileage" :value="item.mileageId">{{ item.mileageInterval }}</Option>
							</Select>
							</td>
						</tr>
					</tbody>
				</table>
				<table>
					<tbody>
						<tr>
							<th>价格：</th>
							<td>
								<a href="javascript:;">
									<input @click="searchPricePage(0)"
											type="radio" name="price" id="price_0" value="0"
											checked="checked" v-model="car.price" />
										<label for="price_0">不限</label>
									</a>
								<a href="javascript:;" v-for="item in prices">
									<input @click="searchPricePage(item.sellPriceId)"  type="radio" name="price"  :id="'price_' + item.sellPriceId " :value="item.sellPriceId"  :key="item.sellPriceId"  v-model="car.price" />
									<label :for="'price_' + item.sellPriceId">{{ item.priceInterval }}</label>
								</a>
							</td>
							<td>
								<Button type="primary" shape="circle" @click="searchCarSellInfo(1)" icon="ios-search">查询</Button>
							</td>
						</tr>
					</tbody>	
				</table>
			</form>
				
		</div>	
	 
	 <div class="width1190">
		<div class="index-fang-list" >
			<div v-for="(item, index) in carArray" @click="carDetail(item.carSellInfoId,item.carId)">
				<dl class="index-item" :style="getLightStyleObject()">
					<dt><img :src="item.imgUrl"/></dt>
					<dd>
						<h3>{{item.brandName}} | {{item.type}} </h3>
						<div class="hui">
							<span>{{item.mileage}}Km</span>
							<!-- <span>{{car.energy}}</span>
							<span>{{car.displacement}}</span> -->
							<span class="amount">￥{{item.sellPrice}}</span>
						</div>
					</dd>
				</dl>
			</div>
			
			<div class="clears"></div>
		</div>
	</div>	
	</div>
		 <div class="page">
		 	<Page :total="totalNum" :page-size="pageSize" :current="currentPage" @on-change="pageSearch"/>
		 </div>
		</Form>
	</Layout>
</template>
<script>
	// import carSale from "../../components/car.vue";
	export default {
		
		data() {
			return {
				iport: '',
				modal11: false,
				number: 10,
				totalNum : 0,
				pageSize : 10,
				currentPage : 1,
				currentUser:{},
				orderInfo: {},
				url:'',
				car:{
					name:'',
					carCondition: null,
					mileage: null,
					brandId: null,
					mileageId : null,
					conditionId : null,
					type: "",
					price:'0',
					sellPriceId:'',
					clientId: '',
					currentPage: null,
					pageSize: null,
					total:null,
				},
				carArray:[],
				styleList: [{
						value: '三厢车',
						label: '三厢车'
					},
					{
						value: '两厢车',
						label: '两厢车'
					},
					{
						value: 'SUV',
						label: 'SUV'
					},
					{
						value: '掀背车',
						label: '掀背车'
					},
					{
						value: '跑车',
						label: '跑车'
					},
					{
						value: 'MPV',
						label: 'MPV'
					},
					{
						value: '敞篷车',
						label: '敞篷车'
					},
					{
						value: '旅行车',
						label: '旅行车'
					},
					{
						value: '皮卡',
						label: '皮卡'
					},
					{
						value: '客车',
						label: '客车'
					},
					{
						value: '货车',
						label: '货车'
					}
				],
				brand:[],
				mileage:[],
				condition:[],
				prices:[],
				
				
			}
		},
		methods: {
			getOrderStatu: function() {
				
			  console.log(this.$data.number)
			  this.number--
			  if (this.number === 0) {
			    clearInterval(this.longSearch)
			    this.modal11 = false
			    this.number = 10
			    this.$Notice.error({
			      title: '支付超时',
			    })
			  }
			  //发请求查询支付状态
			  this.http
			    .get({
			      url: '/pay-order/info',
			      param: {
			        orderNumber: this.orderInfo.orderNumber,
			      },
			    })
			    .then((data) => {
			      console.log('支付状态' + data)
			
			      if (data == 2) {
			        this.modal11 = false
			        clearInterval(this.longSearch)
			        //this.longSearch()
			
			        this.$Notice.success({
			          title: '支付成功',
			        })
			      }
			    })
			},
			//卖车详情查询
			carDetail(carSellInfoId, carId) {
			let self = this 
			clearInterval(this.longSearch)
			  this.car.clientId = JSON.parse(
			    sessionStorage.getItem('CURRENT')
			  ).client.clientId
			  console.log(this.car.clientId)
			  this.http
			    .get({
			      url: '/quotarecord/info',
			      param: {
			        clientId: this.car.clientId,
			        orderTypeId: 13,
			      },
			    })
			    .then((data) => {
			      if (data.quota + 1 > 0) {
			        this.$router.push({
			          name: 'car_sale_detail',
			          params: {
			            carSellInfoId,
			            carId,
			          },
			        })
			      } else {
			        let paramm = {}
			        this.http
			          .post({
			            url: '/pay-order/info',
			            param: {
			              clientId: this.car.clientId,
			              orderTypeId: 13,
			            },
			          })
			          .then((data) => {
			            this.$data.orderInfo = data
			            paramm.clientId = this.$data.orderInfo.clientId
			            paramm.orderNumber = this.$data.orderInfo.orderNumber
			            paramm.price = this.$data.orderInfo.price
			            paramm.orderTypeId = this.$data.orderInfo.orderTypeId
			            this.modal11 = true
			            self.$data.url =  self.$data.iport + 'pay/nativeV2?clientId='+paramm.clientId
			                +'&orderTypeId='+paramm.orderTypeId
			                +'&money='+paramm.price
			                +'&orderNumber='+paramm.orderNumber
			            this.longSearch = setInterval(this.getOrderStatu, 3000)
			          })
			      }
			      console.log(data)
			    })
			},
			getLightStyleObject: function() {
				return {
					animation: 'light'+this.common.getRandom(1, 4)+" "+this.common.getRandom(1, 10)+'s infinite',
				}
			},
			pageSearch: function(changedPage) {
				console.log(changedPage);
				this.$data.currentPage = changedPage;
				this.searchCarSellInfo(changedPage);
			},
			//获取所有品牌
			getBrand() {
				this.http.get({
					url: "/brand/list",
					param: {}
				}).then(data => {
					this.$data.brand = data
					let unCondition = {
						brandId : 0,
						brandName : '不限'
					}
					this.$data.brand.unshift(unCondition)
				});
			},
			//获取所有车龄
			getCondition:function(){		
				this.http.get({
					url: "/car-condition/all",
					param: {}
				}).then(data => {
					//this.$data.brand = data
					this.$data.condition = data
					let unCondition = {
						conditonId : 0,
						conditionInterval : '不限'
					}
					this.$data.condition.unshift(unCondition)
				});
			},
			//获取所有里程数
			getMileage:function(){
				this.http.get({
					url: "/mileage/all",
					param: {}
				}).then(data => {
					//this.$data.brand = data
					this.$data.mileage = data;
					let unCondition = {
						mileageId : 0,
						mileageInterval : '不限'
					}
					this.$data.mileage.unshift(unCondition)
				});
			},
			searchPrice:function(){
				this.http.get({
						url : "/car-sell-price/list",
					}).then(data => {
						console.log(data)
						this.$data.prices = data
						// self.$data.regins = data;
					})
				},
				searchPricePage(sellPriceId){
					console.log(sellPriceId)
					this.$data.car.sellPriceId = sellPriceId
					this.searchCarSellInfo()
				},
			//搜索

			

			pageSearch: function(changedPage) {
			  this.$data.car.currentPage = changedPage
			  this.searchCarSellInfo(changedPage)
			},
			searchCarSellInfo:function(currentPage){
				console.log(this.car.name);  //这里是searchKey
				console.log(this.car.conditionId); // null
				console.log(this.car.mileageId); // null
				console.log(this.car.brandId); //null
				console.log(this.car.type);
				
				
				if(this.car.name == ""){
					this.car.name = null;
				}
				
				if(this.car.type == ""){
					this.car.type = null;
				}
				
				this.http.get({
					url: "/car-sell-info/page",
					param: {
						searchKey : this.car.name,
						conditionId: this.car.conditionId,
						mileageId : this.car.mileageId,
						brandId : this.car.brandId,
						type : this.car.type,
						sellPriceId : this.car.sellPriceId,
						currentPage: currentPage,
						pageSize : this.pageSize,
						// clientId:this.car.clientId,
					}
				}).then(data => {
					console.log("卖车列表为");

					console.log("+++++total:"+data.total);
					this.$data.pageSize = data.size
					this.$data.carArray = data.records
					this.$data.totalNum = data.total
					this.$data.currentPage = data.current
				});
				
				
				
			},
			
		},
		created: function() {
			this.$data.currentUser = JSON.parse(sessionStorage.getItem('CURRENT'))
			this.$data.car.clientId = this.$data.currentUser.client.clientId
			this.iport = this.store.state.iport
			this.searchPrice()
			this.searchCarSellInfo()
			this.getMileage();
			this.getBrand();
			this.getCondition();
			// var cli = this.local.session.getItem("CURRENT");
			// this.houseSell.clientId = cli.client.clientId;
		},
		beforeRouteLeave(to, from, next) {
		    this.$destroy();//手动销毁当前页面
		    next();
		},
	}
</script>

<style >
</style>

